<template>
    <div>
        <div class="container" v-show="!isShow">
            <header>
                <div @click="userQuit">退出</div>
                <h2>TIK</h2>
                <span>在线人数{{ live }}</span>
            </header>

            <div class="content" ref="messageContainer">
                <div v-for="item in list" :key="item.type">
                    <div class="item left" v-if="item.type == 'left'">
                        <Profile />
                        {{ item.content }}
                    </div>
                    <div class="item mid" v-if="item.type == 'mid'">
                        <span>欢迎{{ item.content }}加入</span>

                    </div>

                    <div class="mid" v-if="item.type == 'mid-quit'">
                        <span>{{ item.content }}已退出</span>
                    </div>

                    <div class="item right" v-if="item.type == 'right'">
                        {{ item.content }}
                        <Profile />
                    </div>
                </div>
            </div>

            <div class="snedbox">
                <input v-model="textValue" type="text" @keyup.enter="sned">
                <button @click="sned">send</button>
            </div>
        </div>


        <div v-show="isShow" class="Joinbox">
            <div class="Infobox">
                <h2>
                    Please enter your name
                </h2>
                <input v-model="username" placeholder="username">
                <button @click="Join">Join</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import Profile from "./Profilephoto.vue"
import { inject } from "vue";
import { formatTime } from "../util/time"
const socket = inject("socket")

const textValue = ref('')
const list = ref([])
const username = ref("")
const isShow = ref(true)
const live = ref(0)
// 消息发送
const sned = () => {
    if (textValue.value.length > 0 && username.value.length > 0) {
        let user = {
            name: username.value,
            content: textValue.value,
            date: formatTime(Date.now()),
            type: "right"
        }

        if (user.name.length == 0) return

        let data = {
            name: username.value,
            content: textValue.value,
            date: formatTime(Date.now()),
            type: "left"
        }
        list.value.push(user)
        socket.emit("message", data)
        textValue.value = ''
    }
    scrollToBottom()
}

// 欢迎加入
const Welcome = () => {
    socket.on("welcome", (name, onlive, id) => {
        // 在线人数
        live.value = onlive
        let data = {
            uid: id,
            content: name,
            date: formatTime(Date.now()),
            type: "mid",
            onlive
        }
        list.value.push(data)
    })
}
const getMsg = () => {
    socket.on("gbmsg", data => {
        console.log(data, "00");
        list.value.push(data)
    })

}

// 加入
const Join = () => {
    socket.emit("join", username.value)
    if (username.value.length > 0) {
        isShow.value = !isShow.value
    }
}

// 用户离开
const userQuit = () => {
    socket.on("quit", (name, onlive) => {
        let data = {
            content: name,
            date: formatTime(Date.now()),
            type: "mid-quit",
            onlive
        }
        list.value.push(data)
    })
}


// 消息滚动到最新
const messageContainer = ref(null);
const scrollToBottom = () => {
    // Using $refs to access the message container and scroll to the bottom
    const container = messageContainer.value;
    console.log(container.scrollHeight);
    container.scrollTop = container.scrollHeight;
}


{// 虚拟列表中显示的项目数量
    const itemHeight = 50; // 假设每个项目高度为50px
    const containerHeight = 400; // 可见容器的高度

    // 根据容器高度和项目高度计算可见项目的数量
    const visibleItemCount = Math.ceil(containerHeight / itemHeight);

    // 计算可见项目的索引
    const startIndex = ref(0);
    const endIndex = ref(visibleItemCount - 1);

    // 从整个列表中获取可见项目
    const visibleItems = ref([]);

    const updateVisibleItems = () => {
        visibleItems.value = items.value.slice(startIndex.value, endIndex.value + 1);
    };

    const updateVisibleRange = () => {
        const container = messageContainer.value;
        if (container) {
            const scrollTop = container.scrollTop;
            const scrollIndex = Math.floor(scrollTop / itemHeight);
            startIndex.value = scrollIndex;
            endIndex.value = startIndex.value + visibleItemCount;
            updateVisibleItems();
        }
    };
}

onMounted(() => {
    socket.on('connect', () => {
        console.log(socket.id, '监听客户端连接成功-connect');
    });
    getMsg()
    Welcome()
    userQuit()
})


</script>

<style lang="less"  scoped>
.container {
    width: 40%;
    height: 60%;
    background-color: aliceblue;
    overflow: hidden;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    header {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .snedbox {
        position: fixed;
        bottom: 0;
        right: 0;
        height: 40px;
        width: 100%;
        display: flex;
        justify-content: space-between;

        input {
            width: 100%;
            height: 40px;
            border: none;

        }
    }
}

.content {
    overflow-y: auto;
    width: 90%;
    height: 80%;
    margin: 0 auto;
    background-color: transparent;

    .item {
        margin: 4px 4px;
        padding: 2px;
    }

    .mid {
        text-align: center;
        color: #a9a7a7;
        font-size: small;
    }

    .left {
        display: flex;
        justify-content: flex-start;
        // background-color: rebeccapurple;

    }

    .right {
        display: flex;
        justify-content: flex-end;
        // background-color: rgb(164, 67, 11);
    }


}

.content::-webkit-scrollbar {
    display: none;
}

.Joinbox {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    // background: #000;
    background-color: rgba(0, 0, 0, 0.7);

    .Infobox {
        position: fixed;
        left: 50%;
        top: 45%;
        transform: translate(-50%, -50%);
        width: 360px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        h2 {
            color: aliceblue;
        }

        input {
            height: 40px;
            border: none;
            font-size: 18px;
        }
    }
}
</style>